<template>
<div>
  <el-upload :action="'http://' +serverIp+ ':9090/file/upload'" :show-file-list="false" :on-success="handleFileUploadSuccess" accept="xlsx" style="display: inline-block">
    <el-button type="primary"><i class=" el-icon-top"></i>上传文件</el-button>
  </el-upload>
  <el-popconfirm
      class="ml-5"
      confirm-button-text='确定'
      cancel-button-text='我再想想'
      icon="el-icon-info"
      icon-color="red"
      title="您确定全部删除吗？"
      @confirm="deletebatch"
  >
    <el-button type="danger"class="mr-5" slot="reference"><i class="el-icon-delete"></i>批量删除</el-button>
  </el-popconfirm>

  <el-table :data="tableData" border stripe  @selection-change="handleSelectionChange">
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column prop="id" label="ID">
    </el-table-column>
    <el-table-column prop="name" label="文件名称">
    </el-table-column>
    <el-table-column prop="type" label="文件类型(KB)">
    </el-table-column>
    <el-table-column prop="size" label="文件大小">
    </el-table-column>
    <el-table-column label="预览" align="center">
      <template slot-scope="scope" >
        <el-button type="primary" @click="preview(scope.row.url)">预览&nbsp;<i class="el-icon-picture-outline"></i></el-button>
      </template>
    </el-table-column>
    <el-table-column  label="下载">
      <template slot-scope="scope">
        <el-button type="primary" @click="download(scope.row.url,scope.row)">下载</el-button>
      </template>
    </el-table-column>
    <el-table-column label="启用">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" @change="changeState(scope.row)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="250" align="center" >
      <!--eslint-disable-next-line-->
      <template slot-scope="scope">
        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='我再想想'
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="handelDelete(scope.row.id)"
        >
          <el-button type="danger" slot="reference">删除<i class="el-icon-delete"></i></el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div style="padding: 10px 0">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[2, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
  <el-dialog title="预览卡片" :visible.sync="dialogForm" width="35%" >
    <img v-if="url" :src="url" title="文件不是图片或图片已损坏" class="avatar" width="300px" height="300px" style="padding: 10px;border: 5px solid black">
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>

import {serverIp} from "../../public/config";

export default {
  name:"File",
  data(){
    return{
      tableData:[],
      total:0,
      pagesize:10,
      pagenum:1,
      name:"",
      dialogForm:false,
      url:"",
      serverIp:serverIp
    }
  },
  created() {
    this.load();
  },
  methods:{
    load(){
      //请求分页查询数据
      this.request.get("/file/page",{
        params:{
          pageNum:this.pagenum,
          pageSize:this.pagesize,
          name:this.name,
        }
      }).then(res =>{
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    handleSelectionChange(val){
      console.log(val);
      this.multipleSelection=val
    },
    deletebatch(){
      let ids=this.multipleSelection.map(v =>v.id);
      console.log(ids)
      this.request.post("/file/batch",ids).then(res =>{
        if(res.code==='200') {
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })

    },
    reset(){
      this.name=""
      this.load()
    },
    handleSizeChange(pagesize){
      this.pagesize=pagesize
      this.load()
    },
    handelEdit(row){
      this.form=row
      this.dialogFormVisible=true
    },
    handelDelete(id) {
      this.request.delete("/file/" + id).then(res =>{
        if(res.code==='200') {
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")

        }
      })
    },
    handleCurrentChange(pagenum){
      this.pagenum=pagenum
      this.load()
    },
    handleFileUploadSuccess(){
      this.load()
      this.$message.success("上传成功")
    },
    download(url){

      window.open(url)
    },
    changeState(row){
      this.request.post("/file/update",row).then(res=>{
        if (res.code==='200'){
          this.$message.success("操作成功")
          this.load()
        }
      })
    },
    preview(url){
      this.dialogForm = true
      this.url = url
    },
  }

}
</script>

<style scoped>

</style>